<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<!--关键词和描述-->
	<title>横向二级菜单 满屏 不满屏 变色 等宽</title>

	<!--下面是 公共的css-->
	<link href="__ROOT__/static/css/bootstrap.min.css" rel="stylesheet" />
	<link href="__ROOT__/static/note/index/css/common.css" rel="stylesheet" />
	<!--下面 每个页面的特色css-->
	<style type="text/css">
		li {}
	</style>



</head>

<body>
	<!--满屏  变色 等宽  -->

	<div class="container-fluid">
		<!--表头 开始-->
		<div class="row a">
			<hr style="width:80%;height:3px;border:none;border-top:3px double red;" />
			<p style="text-align:center">基本导航反转</p>
			<!--下面 菜单开始 navbar-inverse 黑色主题-->
			<nav class="navbar navbar-inverse">
				<div class="container">
					<div class="navbar-header">
						<a href="#" class="navbar-brand">标题</a>
					</div>
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="#">首页</a>
						</li>
						<li>
							<a href="#">资讯</a>
						</li>
						<li class="disabled">
							<a href="#">产品</a>
						</li>
						<li>
							<a href="#">关于</a>
						</li>
					</ul>
				</div>
			</nav>
			<!--上面 菜单结束-->
		</div>
		<!--表头 结束-->







	</div>






	<!--下面是 公共的js-->
	<script src="__ROOT__/static/js/jquery.min.js"></script>
	<script src="__ROOT__/static/js/bootstrap.min.js"></script>
</body>

</html>